import React, { Fragment } from 'react'
import { TouchableOpacity, Image, View } from 'react-native'
import { createAppContainer, createSwitchNavigator, NavigationEvents } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { goBack, navigate } from 'services/navigation'
import { translateSize, themeColors, definedColors } from 'styles'
import assets from './assets'
import env from 'constants/env.json'

import AuthLoadingScreen from './AuthLoadingScreen'
import SignInScreen from './SignInScreen'
import AppHomeScreen from './AppHomeScreen'
import ChangeCardScreen from './ChangeCardScreen'
import ChangeProjectScreen from './ChangeProjectScreen'
import SettingScreen from './SettingScreen'
import PaySuccessScreen from './PaySuccessScreen'

import cancel from './cancel'
import trade from './trade'
import identity from './identity'
import fund from './fund'
import demo from './demo'
import ChangeTemplateScreen from './ChangeTemplateScreen'
import ShowBillScreen from './ShowBillScreen'
import ChangeFeeScreen from './ChangeFeeScreen'
import { operate } from 'services/authorization';
import SystemSettingScreen from './SystemSettingScreen'


let appScreen = {
	AppHome: AppHomeScreen,
	SignIn: SignInScreen,
	ChangeCard: ChangeCardScreen,
	ChangeProject: ChangeProjectScreen,
	Setting: SettingScreen,
	SystemSetting: SystemSettingScreen,
	PaySuccess: PaySuccessScreen,
	ChangeTemplate: ChangeTemplateScreen,
	ShowBill: ShowBillScreen,
	ChangeFee: ChangeFeeScreen,
	...cancel,
	...trade,
	...identity,
	...fund,
	...(env.env == 'dev' || env.env == 'ctest' || env.env == 'local' ? demo : {})
}

const AppStack = createStackNavigator(appScreen, {
	headerMode: 'screen',
	defaultNavigationOptions: {
		headerStyle: {
			margin: translateSize(0),
			elevation: 0,
			borderBottomWidth: 1,
			borderBottomColor: themeColors.divider,
			backgroundColor: themeColors.primary,
		},
		headerTitleStyle: {
			flex: 1,
			fontSize: translateSize(32),
			color: definedColors.white,
			textAlign: 'center',
			justifyContent: 'center',
		},
		headerBackTitle: null,
		headerRight: <View />,
		headerLeft: (
			<Fragment>
				<TouchableOpacity
					activeOpacity={0.8}
					style={{ paddingHorizontal: translateSize(24) }}
					onPress={() => {
						goBack()
						operate()
					}}>
					<Image source={assets.images.icon_arrow_left} style={{ width: translateSize(40) }} />
				</TouchableOpacity>
				<TouchableOpacity
					activeOpacity={0.8}
					style={{ paddingHorizontal: translateSize(24) }}
					onPress={() => {
						navigate('AppHome')
						operate()
					}}>
					<Image source={assets.images.icon_home} style={{ width: translateSize(34) }} />
				</TouchableOpacity></Fragment>
		),
	},
})

export const AppContainer = createAppContainer(
	createSwitchNavigator(
		{
			AuthLoading: SignInScreen,
			APPs: AppStack,
		},
		{
			initialRouteName: 'AuthLoading',
		},
	),
)
